<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv='X-UA-Compatible' content='IE=EDGE'/>
		<title>陆家嘴综合指挥平台</title>
		<link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eX0oWIhkTt7PMIWp8r2t0MussrF2CKSW"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
		<script type="text/javascript" src="common.js?v=4"></script>
	</head>

	<body>
		<div class="mui-content">
			<div class="uni-head uni-flex">
				<div class="uni-guanbi uni-flex-auto" v-show="controlState==2 && steps.step7.state == 2">
					<div class="iconfont icon-guanbi" @click="closeWindow"></div>
				</div>
				<div class="uni-date">{{dateStr}}</div>
				<div class="uni-time">{{timeStr}}</div>
			</div>
			
			<div class="uni-content uni-flex">
				<div class="uni-map">
					<div id="allmap"></div>
				</div>
				<div class="uni-control">
					<div class="mui-hidden">{{num}}</div>
					<div class="uni-padded1 uni-flex" v-show="controlState==1">
						<div class="uni-title-group">
							人流量监控
						</div>
						<div class="uni-row" v-for="item in placeList">
							<div class="uni-name uni-flex" v-bind:class="[item.name.length==4?'uni-text-4':'uni-text-5',getAlertColor(item)]">
								<div>{{item.name}}</div>
							</div>
							<div class="uni-detail uni-flex">
								<div class="uni-flex uni-one">
									<div class="uni-point" v-bind:class="[getAlertColor(item)]"></div>
									<div class="uni-title">执勤人数：</div>
									<div class="uni-des">{{item.workerNum}}人</div>
								</div>
								<div class="uni-flex uni-one">
									<div class="uni-point" v-bind:class="[getAlertColor(item)]"></div>
									<div class="uni-title">人流数量：</div>
									<div class="uni-des">{{getRandomNum(item.peopleNum)}}人</div>
								</div>
								<div class="uni-flex uni-one">
									<div class="uni-point" v-bind:class="[getAlertColor(item)]"></div>
									<div class="uni-title">区域位置：</div>
									<div class="uni-des mui-ellipsis">{{item.areaPosition}}</div>
								</div>
								<div class="uni-flex uni-one">
									<div class="uni-point" v-bind:class="[getAlertColor(item)]"></div>
									<div class="uni-title">人流量状态：</div>
									<div class="uni-des" v-bind:class="[getAlertTextColor(item)]">{{getAlertText(item)}}</div>
								</div>
							</div>
						</div>
					</div>
					<div class="uni-padded2 uni-flex" v-show="controlState == 2">
						<div class="uni-info">
							<div class="uni-title">
								预警信息
							</div>
							<div class="uni-detail uni-flex">
								<div class="uni-name uni-flex" v-bind:class="[getAlertColor(dealPlace)]">
									<div>{{getAlertText(dealPlace)}}</div>
								</div>
								<div class="uni-des uni-flex">
									<div class="uni-row">位置区域：{{dealPlace.name}}</div>
									<div class="uni-row">预警时间：{{steps.startTime.format("yyyy-MM-dd HH:mm:ss")}}</div>
									<div class="uni-row">人流数量：{{getRandomNum(dealPlace.peopleNum)}}人</div>
									<div class="uni-row">执行状态：{{isEnd?'已完成应对措施':'已通知各相关单位'}}</div>
									<div class="uni-row">执行计时：{{changeToTimecost(steps.costtime)}}</div>
								</div>
							</div>
						</div>
						<div class="uni-deal" v-show="steps.step1.state != -1">
							<div class="uni-title">
								应对措施
							</div>
							<div class="uni-detail uni-flex">
								<div class="uni-one uni-flex" v-show="steps.step1.state != -1">
									<div class="uni-sn uni-flex">
										<div class="uni-num-point">1</div>
										<div class="uni-num-line" v-show="steps.step2.state != -1"></div>
									</div>
									<div class="uni-task">
										<div class="uni-sub-title">
											调度现场监控
											<div class="uni-time-cost">
												{{changeToTimecost(steps.step1.costtime)}}
											</div>
										</div>
										<div class="uni-task-list">
											<div>执行任务：调出现场监控视频画面</div>
											<div class="uni-flex uni-state-list">执行状态：
												<div class="uni-state uni-orange-bg">开始调度</div>
												<div class="iconfont icon-long-arrow-rt" v-bind:class="steps.step1.state == 1?'uni-green':''"></div>
												<div class="uni-state" v-bind:class="steps.step1.state == 1?'uni-green-bg':''">调度完成</div>
											</div>
										</div>
									</div>
								</div>
								<div class="uni-two uni-flex" v-show="steps.step2.state != -1">
									<div class="uni-sn uni-flex">
										<div class="uni-num-point">2</div>
										<div class="uni-num-line" v-show="steps.step3.state != -1"></div>
									</div>
									<div class="uni-task">
										<div class="uni-sub-title">
											播放广播
											<div class="uni-time-cost">
												{{changeToTimecost(steps.step2.costtime)}}
											</div>
										</div>
										<div class="uni-task-list">
											<div>执行任务：循环播放广播，警示区域人流</div>
											<div class="uni-flex uni-state-list">执行状态：
												<div class="uni-state uni-green-bg">开始播放</div>
											</div>
										</div>
									</div>
								</div>
								<div class="uni-three uni-flex" v-show="steps.step3.state != -1">
									<div class="uni-sn uni-flex">
										<div class="uni-num-point">3</div>
										<div class="uni-num-line" v-show="steps.step4.state != -1"></div>
									</div>
									<div class="uni-task">
										<div class="uni-sub-title">
											指令发布
											<div class="uni-time-cost">
												{{changeToTimecost(steps.step3.costtime)}}
											</div>
										</div>
										<div class="uni-task-list">
											<div class="uni-flex">执行任务：
												<div class="uni-text-more">通知夏志松和焦令君抵达现场进行指挥，以及张翼飞、秦聚德、王奇为三位领导进行综合指挥。
												</div>
											</div>
											<div class="uni-flex uni-state-list" style="margin-top: 0.01rem;">执行状态：
												<div class="uni-state uni-purple-image" :style="{backgroundSize: (0.7*steps.step3.alertnum/steps.step3.totalnum)+'rem 100%'}">已通知{{steps.step3.alertnum}}/{{steps.step3.totalnum}}</div>
												<div class="iconfont icon-long-arrow-rt" v-bind:class="steps.step3.state > 0?'uni-orange':''"></div>
												<div class="uni-state uni-orange-image" :style="{backgroundSize: (0.7*steps.step3.receivenum/steps.step3.totalnum)+'rem 100%'}">已接收{{steps.step3.receivenum}}/{{steps.step3.totalnum}}</div>
												<div class="iconfont icon-long-arrow-rt" v-bind:class="steps.step3.state > 1?'uni-green':''"></div>
												<div class="uni-state uni-green-image" :style="{backgroundSize: (0.7*steps.step3.dealnum/steps.step3.totalnum)+'rem 100%'}">已处理{{steps.step3.dealnum}}/{{steps.step3.totalnum}}</div>
											</div>
										</div>
									</div>
								</div>
								<div class="uni-four uni-flex" v-show="steps.step4.state != -1">
									<div class="uni-sn uni-flex">
										<div class="uni-num-point">4</div>
										<div class="uni-num-line" v-show="steps.step5.state != -1"></div>
									</div>
									<div class="uni-task">
										<div class="uni-sub-title">
											通知特保人员与摄影联系人
											<div class="uni-time-cost">
												{{changeToTimecost(steps.step4.costtime)}}
											</div>
										</div>
										<div class="uni-task-list">
											<div class="uni-flex">执行任务：
												<div class="uni-text-more">现场执勤人员对观光拍照人员进行疏导、通知摄影点撤摊
													<br/>摄影点联系人：牛海峰，联系电话：137 6146 6457
												</div>
											</div>
											<div class="uni-flex uni-state-list" style="margin-top: 0.01rem;">执行状态：
												<div class="uni-state uni-purple-image" :style="{backgroundSize: (0.7*steps.step4.alertnum/steps.step4.totalnum)+'rem 100%'}">已通知{{steps.step4.alertnum}}/{{steps.step4.totalnum}}</div>
												<div class="iconfont icon-long-arrow-rt" v-bind:class="steps.step4.state > 0?'uni-orange':''"></div>
												<div class="uni-state uni-orange-image" :style="{backgroundSize: (0.7*steps.step4.receivenum/steps.step4.totalnum)+'rem 100%'}">已接收{{steps.step4.receivenum}}/{{steps.step4.totalnum}}</div>
												<div class="iconfont icon-long-arrow-rt" v-bind:class="steps.step4.state > 1?'uni-green':''"></div>
												<div class="uni-state uni-green-image" :style="{backgroundSize: (0.7*steps.step4.dealnum/steps.step4.totalnum)+'rem 100%'}">已处理{{steps.step4.dealnum}}/{{steps.step4.totalnum}}</div>
											</div>
										</div>
									</div>
								</div>
								<div class="uni-five uni-flex" v-show="steps.step5.state != -1">
									<div class="uni-sn uni-flex">
										<div class="uni-num-point">5</div>
										<div class="uni-num-line" v-show="steps.step6.state != -1"></div>
									</div>
									<div class="uni-task">
										<div class="uni-sub-title">
											通知养护公司
											<div class="uni-time-cost">
												{{changeToTimecost(steps.step5.costtime)}}
											</div>
										</div>
										<div class="uni-task-list">
											<div class="uni-flex">执行任务：
												<div class="uni-text-more">通知养护公司电梯单向向下运行
													<br/>二层连廊负责人：徐国华，联系电话：137 6448 3467
												</div>
											</div>
											<div class="uni-flex uni-state-list" style="margin-top: 0.01rem;">执行状态：
												<div class="uni-state uni-purple-image" :style="{backgroundSize: (0.7*steps.step5.alertnum/steps.step5.totalnum)+'rem 100%'}">已通知{{steps.step5.alertnum}}/{{steps.step5.totalnum}}</div>
												<div class="iconfont icon-long-arrow-rt" v-bind:class="steps.step5.state > 1?'uni-green':''"></div>
												<div class="uni-state uni-green-image" :style="{backgroundSize: (0.7*steps.step5.dealnum/steps.step5.totalnum)+'rem 100%'}">已处理{{steps.step5.dealnum}}/{{steps.step5.totalnum}}</div>
											</div>
										</div>
									</div>
								</div>
								<div class="uni-six uni-flex" v-show="steps.step6.state != -1">
									<div class="uni-sn uni-flex">
										<div class="uni-num-point">6</div>
										<div class="uni-num-line" v-show="steps.step7.state != -1"></div>
									</div>
									<div class="uni-task">
										<div class="uni-sub-title">
											人员增派
											<div class="uni-time-cost">
												{{changeToTimecost(steps.step6.costtime)}}
											</div>
										</div>
										<div class="uni-task-list">
											<div class="uni-flex">执行内容：
												<div class="uni-text-more">增派第二责任区正大富城区域4名警力、城管和17-18名特保到达现场进行处置，通过人员叠加，保持人流流动。
													<br/>并对以下点位实施封控
													<br/>(a) 麦当劳天桥通道口，安排8名特保巡逻管控。
													<br/>(b) 地铁一号口上口，隔离栏旁安排2名特保管控。
													<br/>(c) 正大广场出入口，安排6名特保管控。
													<br/>(d) 国金出入口附近安排4名特保管控。
													<br/>(e) 明珠出入口附近安排2名特保管控。
												</div>
											</div>
											<div class="uni-flex uni-state-list" style="margin-top: 0.055rem;">
												<div style="height: 0.7rem;">执行状态：</div>
												<div class="uni-progress-list">
													<div class="uni-row">
														<div class="uni-progress">
															<div class="uni-progress-bar" style="background-color: #cc6601;" :style="{width: (3*steps.step6.alertnum/steps.step6.totalnum)+'rem'}">
															</div>
														</div>
														<div class="uni-people-list uni-flex-auto">
															<div class="uni-digital" v-show="steps.step6.alertnum>9">
																{{parseInt((steps.step6.alertnum%100)/10)}}
															</div>
															<div class="uni-digital">
																{{steps.step6.alertnum%10}}
															</div>
														</div>
														<div class="uni-unit">
															人
														</div>
													</div>
													<div class="uni-row">
														<div class="uni-progress">
															<div class="uni-progress-bar" style="background-color: #d7c243;" :style="{width: (3*steps.step6.receivenum/steps.step6.totalnum)+'rem'}">
															</div>
														</div>
														<div class="uni-people-list uni-flex-auto">
															<div class="uni-digital" v-show="steps.step6.receivenum>9">
																{{parseInt((steps.step6.receivenum%100)/10)}}
															</div>
															<div class="uni-digital">
																{{steps.step6.receivenum%10}}
															</div>
														</div>
														<div class="uni-unit">
															人
														</div>
													</div>
													<div class="uni-row">
														<div class="uni-progress">
															<div class="uni-progress-bar" style="background-color: #6cd377;" :style="{width: (3*steps.step6.dealnum/steps.step6.totalnum)+'rem'}">
															</div>
														</div>
														<div class="uni-people-list uni-flex-auto">
															<div class="uni-digital" v-show="steps.step6.dealnum>9">
																{{parseInt((steps.step6.dealnum%100)/10)}}
															</div>
															<div class="uni-digital">
																{{steps.step6.dealnum%10}}
															</div>
														</div>
														<div class="uni-unit">
															人
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="uni-seven uni-flex" v-show="steps.step7.state != -1">
									<div class="uni-sn uni-flex">
										<div class="uni-num-point">7</div>
									</div>
									<div class="uni-task">
										<div class="uni-sub-title" style="height: 0.32rem;line-height: 0.35rem;">
											各项措施开始正常运转
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			var webUrl = "http://192.168.2.127:8080/zpmng/springmvc/";
			mui.init();
			var page = new Vue({
				el: '.mui-content',
				data: {
					people:0,
					num: 0,
					timeStr: "",
					dateStr: "",
					controlState: 1,
					controlRemark:"0",
					dealPlace: {},
					placeList: [{
						"name": "环岛天桥",
						"workerNum": "2",
						"peopleNum": "1000",
						"areaPosition": "陆家嘴环岛天桥区域",
						"alermYellow": "1800",
						"alermOrange": "2000",
						"alermRed": "3000"
					}],
					timercount: 0,
					steps: steps1,
					usersLocationflag:0,
					usersMap:{}
				},
				computed: {
					isEnd:{
						//getter
						get:function(){
							if(this.steps.step1.state == 1 &&
								this.steps.step2.state == 1 &&
								this.steps.step3.state == 3 &&
								this.steps.step4.state == 3 &&
								this.steps.step5.state == 3 &&
								this.steps.step6.state == 3 &&
								this.steps.step7.state > -1
							) {
								return true;
							} else {
								return false;
							}
						},
						set:function(value){
							
						}
					}
				}
			});
			
			var people = getUrlParam("people");
			if(people.length>0){
				page.people = parseInt(people);
				//直接触发调度界面
			}
			/*
			 * 总数的5%浮动
			 */
			function getRandomNum(peopleNum) {
				if(peopleNum == undefined) {
					return 0;
				}
				var r = Math.random();
				var num = peopleNum - parseInt(peopleNum * 0.05 * r);
				return num;
			}

			function getAlertColor(item) {
				var peopleNum = parseInt(item.peopleNum);
				var alermYellow = parseInt(item.alermYellow);
				var alermOrange = parseInt(item.alermOrange);
				var alermRed = parseInt(item.alermRed);
				if(peopleNum < alermOrange) {
					return "uni-blue-bg";
				} else {
					return "uni-orange-bg";
				}
			}

			function getAlertText(item) {
				var peopleNum = parseInt(item.peopleNum);
				var alermYellow = parseInt(item.alermYellow);
				var alermOrange = parseInt(item.alermOrange);
				var alermRed = parseInt(item.alermRed);
				if(peopleNum < alermOrange) {
					return "正常";
				} else {
					return "橙色预警";
				}
			}

			function getAlertTextColor(item) {
				var peopleNum = parseInt(item.peopleNum);
				var alermYellow = parseInt(item.alermYellow);
				var alermOrange = parseInt(item.alermOrange);
				var alermRed = parseInt(item.alermRed);
				if(peopleNum < alermOrange) {
					return "";
				} else {
					return "uni-orange";
				}
			}

			// 百度地图API功能
			var map = new BMap.Map("allmap");
			map.centerAndZoom(new BMap.Point(121.509899, 31.24942), 17);
			var ctrl = new BMapLib.TrafficControl({
				showPanel: true //是否显示路况提示面板
			});
			map.enableScrollWheelZoom(true);
			map.addControl(ctrl);
			ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);
			setTimeout(function() {
				/*
				 * 添加一个交管，写死
				 */
				addUserToMap({
					id: -1,
					name:"交管",
					a2postName: "交管",
					jobNumber:"",
					idcardno:"丰和路明珠塔",
					telephone:""
				}, 31.244599, 121.505599);
			}, 2000);
			
			mui.ready(function() {
				setInterval(OnTimer1, 1000);
				page.dealPlace = page.placeList[0];
				queryDisplayList();
				getUserList();
			});	

			function closeWindow(){
//				window.opener = null;
//  				window.open("", "_self");
//  				window.close();
//  				open(location, '_self').close();
    				window.open('','_self','');
				window.close();
			}
			
			function OnTimer1() {
				var now = new Date();
				page.dateStr = now.format("yyyy-MM-dd");
				page.timeStr = now.format("HH:mm");

				if(page.controlState == 2) {
					count();
					dealWithControl();
				}
				if(page.timercount % 5 == 4) {
					OnTimer5();
					page.timercount = 0;
				} else {
					page.timercount++;
				}
			};

			function OnTimer5() {
				//用户的位置显示在地图上
				dynamicLocation();
				page.num++;
				if(page.controlState == 1) {
					//查询列表数据
					queryDisplayList();
				} else if(page.controlState == 2) {
					queryRemark();
					queryAndDarwPath();
					//预警信息已经触发
					if(page.steps.step3.state == 1) {
						//查询接收人数
						step3CheckRecv();
					} else if(page.steps.step3.state == 2) {
						//查询处理人数
						step3CheckDeal();
					}
					if(page.steps.step4.state == 1) {
						//查询接收人数
						step4CheckRecv();
					} else if(page.steps.step4.state == 2) {
						//查询处理人数
						step4CheckDeal();
					}
					if(page.steps.step5.state == 2) {
						//查询处理人数
						step5CheckDeal();
					}
					if(page.steps.step6.state == 1) {
						//查询接收人数
						step6CheckRecv();
					} else if(page.steps.step6.state == 2) {
						//查询处理人数
						step6CheckDeal();
					}
					if(page.steps.step7.state == 1) {
						//下调整人数
						step7ReducePeople();
					} else if(page.steps.step7.state == 2) {
						//wxl新加
						if(page.people>2000){
//							closeWindow();
							page.steps.step7.state =2;
							return;
						}
						else{
							page.controlState = 1;
							//恢复地图
							for (var i=0; i<taskUserList.length; i++) {
								var user = page.usersMap[taskUserList[i]];
								if(user.hasOwnProperty("polyline")){
									map.removeOverlay(user.polyline);
								}
								user.polyline = null;
							}
						}
					}
				}
			}

			function count() {
				if(!page.isEnd) {
					page.steps.costtime++;
				} else {
					if(page.steps.step7.state == 0) {
						page.steps.step7.state = 1;
					}
				}
				if(page.steps.step1.state == 0) {
					page.steps.step1.costtime++;
				}
				if(page.steps.step2.state == 0) {
					page.steps.step2.costtime++;
				}
				if(page.steps.step3.state != -1 && page.steps.step3.state != 3) {
					page.steps.step3.costtime++;
				}
				if(page.steps.step3.state == 3){
					page.steps.step3.alertnum = page.steps.step3.totalnum; //通知的人数
					page.steps.step3.receivenum = page.steps.step3.totalnum; //接收人数
					page.steps.step3.dealnum = page.steps.step3.totalnum; //处理的人数
				}
				if(page.steps.step4.state != -1 && page.steps.step4.state != 3) {
					page.steps.step4.costtime++;
				}
				if(page.steps.step4.state == 3){
					page.steps.step4.alertnum = page.steps.step4.totalnum; //通知的人数
					page.steps.step4.receivenum = page.steps.step4.totalnum; //接收人数
					page.steps.step4.dealnum = page.steps.step4.totalnum; //处理的人数
				}
				if(page.steps.step5.state != -1 && page.steps.step5.state != 3) {
					page.steps.step5.costtime++;
				}
				if(page.steps.step5.state == 3){
					page.steps.step5.alertnum = page.steps.step5.totalnum; //通知的人数
					page.steps.step5.receivenum = page.steps.step5.totalnum; //接收人数
					page.steps.step5.dealnum = page.steps.step5.totalnum; //处理的人数
				}
				if(page.steps.step6.state != -1 && page.steps.step6.state != 3) {
					page.steps.step6.costtime++;
				}
				if(page.steps.step6.state == 3){
					page.steps.step6.alertnum = page.steps.step6.totalnum; //通知的人数
					page.steps.step6.receivenum = page.steps.step6.totalnum; //接收人数
					page.steps.step6.dealnum = page.steps.step6.totalnum; //处理的人数
				}
			}

			function dealWithControl() {
				if(page.controlState == 2) {
					if(page.steps.step1.state == -1) {
						page.steps.step1.state = 0;
						setTimeout(function() {
							//结束任务1
							page.steps.step1.state = 1;
						}, 5000);
						return;
					}
					if(page.steps.step2.state == -1) {
						page.steps.step2.state = 0;
						setTimeout(function() {
							//结束任务2
							page.steps.step2.state = 1;
						}, 3000);
						return;
					}
					if(page.steps.step3.state == -1) {
						page.steps.step3.state = 0;
						step3StartPush();
						return;
					}
					if(page.steps.step4.state == -1) {
						page.steps.step4.state = 0;
						step4StartPush();
						return;
					}
					if(page.steps.step5.state == -1) {
						page.steps.step5.state = 0;
						step5StartPush();
						return;
					}
					if(page.steps.step6.state == -1) {
						page.steps.step6.state = 0;
						step6StartPush();
						return;
					}
					if(page.steps.step7.state == -1) {
						page.steps.step7.state = 0;
						return;
					}
				}
			}

			function changeToTimecost(time) {
				var hour = parseInt(time / 3600);
				var minute = parseInt((time % 3600) / 60);
				var second = time % 60;
				if(hour == 0) {
					var minuteStr = minute;
					var secondStr = second;
					if(minute < 10) {
						minuteStr = '0' + minute;
					}
					if(second < 10) {
						secondStr = '0' + second;
					}
					return minuteStr + ":" + secondStr;
				} else {
					var hourStr = hour;
					var minuteStr = minute;
					var secondStr = second;
					if(hour < 10) {
						hourStr = '0' + hour;
					}
					if(minute < 10) {
						minuteStr = '0' + minute;
					}
					if(second < 10) {
						secondStr = '0' + second;
					}
					return hourStr + ":" + minuteStr + ":" + secondStr;
				}
			}
		</script>
	</body>

</html>